<template>
  <div>
    <img class="table-image" :src="firstImageURL" @click="preview">
    <a-modal :visible="previewVisible" :footer="null" @cancel="previewVisible = false">
      <img style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>
<script>
import Vue from 'vue'
import {ACCESS_TOKEN} from '@/store/mutation-types'

export default {
  name: 'FcImage',
  props: {
    imageIdStr: '',
  },
  computed: {
    firstImageURL() {
      return this.formatImageUrls?.[0]
    },
    formatImageUrls() {
      if (!this.imageIdStr) {
        return []
      }
      let token = Vue.ls.get(ACCESS_TOKEN)
      let split = this.imageIdStr.split(',')
      let imageUrls = split.map(value => `${this.$store.state.baseUrl}/sysFileInfo/preview?id=${value}&token=${token}`)
      return imageUrls
    }
  },
  data() {
    return {
      previewVisible: false,
      previewImage: null
    }
  },
  methods: {
    preview() {
      this.previewVisible = true
      this.previewImage = this.firstImageURL
    }
  },
  created() {

  }
}
</script>
<style scoped>

.table-image {
  cursor: pointer;
  max-width: 100px;
  max-height: 50px;
  border: solid 1px #cccccc;
}

</style>